<template>
	<view class="content">
		<view class="box">
			<view class="logo">
				<image src='http://codegen.caihongy.cn/20220212/f6432c253ce8485caf557e0e3fdb1ef3.jfif' mode="aspectFill"></image>
				<view class="title">健康食谱</view>
			</view>
			<view class="form-item">
				<input v-model="username" type="text" class="input" name="" placeholder="请输入账号" />
			</view>
			<view class="form-item">
				<input v-model="password" type="password" class="input" name="" placeholder="请输入密码" />
			</view>
			<view class="form-item" v-if="roleNum>1">
				<picker @change="optionsChange" :value="index" :range="options">
					<view class="picker-view">{{options[index]}}</view>
				</picker>
			</view>
			<button class="btn-submit" @tap="onLoginTap" type="primary">登录</button>
			<view class="links">
				<view class="link-item" @tap="onRegisterTap('yonghu')">注册用户</view>
				<view class="link-item" @tap="onForgetTap">忘记密码？</view>
			</view>
		</view>
	</view>
</template>

<style>
	.btn-submit {
		height: auto !important;
		line-height: 88rpx;
		transition: all 0.3s ease;
	}
	.btn-submit:active {
		transform: scale(0.98);
		opacity: 0.9;
	}
</style>

<script>
	import menu from '@/utils/menu'
	export default {
		data() {
			return {
				username: '',
				password: '',
				codes: [{
				  num: 1,
				  color: '#000',
				  rotate: '10deg',
				  size: '16px'
				}, {
				  num: 2,
				  color: '#000',
				  rotate: '10deg',
				  size: '16px'
				}, {
				  num: 3,
				  color: '#000',
				  rotate: '10deg',
				  size: '16px'
				}, {
				  num: 4,
				  color: '#000',
				  rotate: '10deg',
				  size: '16px'
				}],
				options: [
					'请选择登录用户类型'
				],
                		optionsValues: [
					'',
                    			'yonghu',
				],
				index: 0,
				roleNum:0
			}
		},
		onLoad() {
			let options = ['请选择登录用户类型'];
			let menus = menu.list();
			this.menuList = menus;
			for(let i=0;i<this.menuList.length;i++){
				if(this.menuList[i].hasFrontLogin=='是'){
					options.push(this.menuList[i].roleName);
					this.roleNum++;
				}
			}
			if(this.roleNum==1) {
				this.index = 1;
			}	
			this.options = options;
			this.styleChange()
		},
		methods: {
			styleChange() {
				this.$nextTick(()=>{
					// document.querySelectorAll('.uni-input .uni-input-input').forEach(el=>{
					//   el.style.backgroundColor = this.loginFrom.content.input.backgroundColor
					// })
				})
			},
			onRegisterTap(tableName) {
                uni.setStorageSync("loginTable", tableName);
				this.$utils.jump('../register/register')
			},
			onForgetTap() {
				this.$utils.jump('../forget/forget')
			},
			async onLoginTap() {
                if (!this.optionsValues[this.index]) {
					this.$utils.msg('请选择登陆用户类型')
					return
				}
				let res = await this.$api.login(`${this.optionsValues[this.index]}`, {
					username: this.username,
					password: this.password
				});
                uni.removeStorageSync("useridTag");
				uni.setStorageSync("token", res.token);
				uni.setStorageSync("nickname",this.username);
				uni.setStorageSync("nowTable", `${this.optionsValues[this.index]}`);
				res = await this.$api.session(`${this.optionsValues[this.index]}`);
				// 保存用户id
				uni.setStorageSync("userid", res.data.id);
				if(res.data.vip) {
					uni.setStorageSync("vip", res.data.vip);
				}
				uni.setStorageSync("role", `${this.options[this.index]}`);
				this.$utils.tab('../index/index');
			},
			optionsChange(e) {
				this.index = e.target.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	$color-primary: #4A4A4A;

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100vh;
		box-sizing: border-box;
		background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}
	
	.box {
		padding: 60rpx 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		margin: 0 5%;
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		width: 90%;
		max-width: 600rpx;
	}
	
	.logo {
		padding: 0;
		margin: 0 0 60rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		}
		
		.title {
			margin-top: 20rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: $color-primary;
		}
	}
	
	.form-item {
		margin-bottom: 30rpx;
		
		.input {
			padding: 0 30rpx;
			background-color: #f8f8f8;
			color: #333;
			border-radius: 12rpx;
			width: 100%;
			height: 88rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			border: 1px solid #eee;
		}
		
		.picker-view {
			padding: 0 30rpx;
			background-color: #f8f8f8;
			color: #333;
			border-radius: 12rpx;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			border: 1px solid #eee;
		}
	}
	
	.btn-submit {
		background-color: $color-primary;
		border-radius: 12rpx;
		color: #fff;
		width: 100%;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.98);
			opacity: 0.9;
		}
	}
	
	.links {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		
		.link-item {
			padding: 20rpx 0;
			color: $color-primary;
			font-size: 26rpx;
			
			&:last-child {
				color: #999;
			}
		}
	}
</style>
